<template>
    <div>
        <div>
            <el-input v-model="role.name" style="width: 200px;margin-right: 10px" placeholder="角色英文名" size="small">
                <template slot="prepend">ROLE_</template>
            </el-input>
            <el-input v-model="role.namezh" style="width: 150px;margin-right: 10px" placeholder="角色中文名" size="small"></el-input>
            <el-button type="warning" plain style="margin-bottom: 8px" @click="addRole" size="small">Add</el-button>
        </div>
    <el-table
            :data="roles"
            style="width: 80%"
            max-height="500">
        <el-table-column
                prop="id"
                label="id"
                width="200px">
        </el-table-column>
        <el-table-column
                prop="name"
                label="英文名"
                width="300px">
            <template slot-scope="{row}">
                <template v-if="row.edit1">
                    <el-input v-model="row.name" class="edit-input" size="mini" />
                    <el-button
                            class="cancel-btn"
                            size="mini"
                            icon="el-icon-refresh"
                            type="warning"
                            @click="cancelEdit(row,1)"
                    >
                        cancel
                    </el-button>
                </template>
                <span v-else>{{ row.name }}</span>
            </template>
        </el-table-column>
        <el-table-column
                prop="namezh"
                label="中文名"
                width="300px">
            <template slot-scope="{row}">
                <template v-if="row.edit2">
                    <el-input v-model="row.namezh" class="edit-input" size="mini" />
                    <el-button
                            class="cancel-btn"
                            size="small"
                            icon="el-icon-refresh"
                            type="warning"
                            @click="cancelEdit(row,2)"
                    >
                        cancel
                    </el-button>
                </template>
                <span v-else>{{ row.namezh }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="操作"
                align="center"
                >
            <template slot-scope="{row}">
                <el-button
                        v-if="row.edit1 || row.edit2"
                        type="success"
                        size="small"
                        icon="el-icon-circle-check-outline"
                        @click="confirmEdit(row)"
                >
                    Ok
                </el-button>
                <el-button
                        v-else
                        type="primary"
                        size="small"
                        icon="el-icon-edit"
                        @click="()=>{row.edit1=!row.edit1;row.edit2=!row.edit2}"
                >
                    Edit
                </el-button>
                <el-button
                        @click.native.prevent="deleteRow(row, roles)"
                        type="text"
                        size="small">
                    移除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    </div>
</template>

<script>
    import {Message} from "element-ui";
    const url = "/system/roles/";
    export default {
        name: "SysRole",
        data(){
            return{
                roles:[],
                role:{
                    id: 0,
                    name: "",
                    namezh: ""
                },
            }
        },
        mounted() {
            this.initRoles();
        },
        methods:{
            initRoles(){
                this.getRequest(url).then(resp=>{
                    if(resp){
                        this.roles = resp.map(v => {
                            this.$set(v, 'edit1', false)
                            this.$set(v, 'edit2', false) // https://vuejs.org/v2/guide/reactivity.html
                            v.originalName = v.name //  will be used when user click the cancel botton
                            v.originalNameZh = v.namezh
                            return v
                        });
                    }
                })
            },
            deleteRow(row,datas){
                this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let id = row.id;
                    let n_url = url+id;
                    // console.log(n_url)
                    this.deleteRequest(n_url).then(resp=>{
                        if(resp){
                            this.initRoles();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            checkName(name){
                let f = true
                for(let c of name){
                    if(!(c>='a' && c<='z' || c>='A' && c<='Z' || c=='_')){
                        Message.warning("只能为英文");
                        f = false
                        return f
                    }
                }
                return f
            },
            addRole(){
                  // this.role.name = "ROLE_"+this.role.name;
                let f = this.checkName(this.role.name);
                if(f){
                    let n_url = url+'?name='+this.role.name+'&namezh='+this.role.namezh
                    this.postRequest(n_url).then(resp=>{
                        if(resp){
                            this.role.name = '';
                            this.role.namezh = '';
                            this.initRoles();
                        }
                    })
                }

            },
            cancelEdit(row,index) {
                if(index===1){
                    row.name = row.originalName
                    row.edit1 = false
                }else{
                    row.namezh = row.originalNameZh
                    row.edit2 = false
                }
                Message({
                    message: 'The title has been restored to the original value',
                    type: 'warning'
                })
            },
            confirmEdit(row) {
                let f = this.checkName(row.name)
                if(f){
                    this.putRequest(url,row).then(resp=>{
                        if(resp){
                            row.originalName = row.name
                            row.originalNameZh = row.namezh
                            // Message({
                            //     message: 'The title has been edited',
                            //     type: 'success'
                            // })
                        }
                    })
                }else{
                    row.name = row.originalName
                    row.namezh = row.originalNameZh
                }
                row.edit1 = false
                row.edit2 = false
            }
        }
    }
</script>

<style>
    .edit-input {
        padding-right: 100px;
    }
    .cancel-btn {
        position: absolute;
        right: 15px;
        top: 10px;
    }
</style>
<style scoped>
    /* 用来设置当前页面element全局table 选中某行时的背景色*/
    /deep/ .el-table__body tr.current-row>td{
        background-color: rgba(35,29,37,.9) !important;
        /* color: #f19944; */  /* 设置文字颜色，可以选择不设置 */
    }
    /deep/ .el-table, /deep/ .el-table__expanded-cell {
        background-color: rgba(35,29,37,.26);
    }
    /deep/ .el-table th, /deep/ .el-table tr, /deep/ .el-table td{
        background-color: rgba(35,29,37,.26);
    }
    /deep/ .el-table--enable-row-transition, /deep/ .el-table__body td, /deep/ .el-table .cell{
        background-color: rgba(35,29,37,.1);;
    }
    /deep/ .el-table .cell{
        color: rgba(256, 256, 256, 0.78);
    }
</style>